import React, { useEffect, useState } from 'react'
import { useLocation } from 'react-router-dom'

import { listUser } from "../../services/apis"
import { SysUser } from "../../typing"
import { Table } from "../../components/Table"


export default function User() {
  const location = useLocation()
  const [userList, setUserList] = useState<SysUser[]>([])
  const [pagination, setPagination] = useState<Pagination>({current:1,size:10,total:0})

  useEffect(()=>{
    listUser().then(data=>{
      if(data){
        setPagination({current:data.current,size:data.size,total:data.total})
        if(data.data){
          setUserList(data.data)
        }
      }
    })
  }, [])

  const columns: ColumnOption[] = [
  {
    field:"id"
  },
  {
    field:"username"
  },
  {
    field:"email"
  },
  {
    field:"mobile"
  },
  {
    field:"birthday"
  },
  {
    field:"sex"
  }
  ]

  const onTableChange = (current:number)=>{
    listUser(current).then(data=>{
      if(data){
        setPagination({current:data.current,size:data.size,total:data.total})
        if(data.data){
          setUserList(data.data)
        }
      }
    })
  }

  const opts:TableProps = {
    data: userList,
    columns,
    rowKey: "id",
    pagination,
    onChange: onTableChange,
  }

  const RenderBtn = ()=>{
    return (
      <div>
        <button>Create</button>
      </div>
    )
  }

  const RenderTable = ()=>{
    return <Table {...opts} />
  }

  return (
    <>
      {RenderBtn()}
      {RenderTable()}
    </>
  )
}
